<template>
	<el-form ref="form" :model="procedureDetails" :rules="rules" size="mini" label-width="150px" inline>
		<fx-detials-form-row>
			<el-form-item slot="left">
			</el-form-item>
			<el-form-item slot="right" style="float: right;">
				<el-button type="primary" icon="el-icon-check" @click="saveProcedure">保存当前工序</el-button>
			</el-form-item>
		</fx-detials-form-row>
		<fx-detials-form-row>
			<el-form-item slot="left" prop="seq" label="顺序号：">
				<w-input
					v-model="procedureDetails.seq"
					:maxlength="$fxCommon.getFxInputMaxLength('commonCode')"
					:regType="$fxCommon.getFxInputReg('commonCode')"
					class="form-item-input"
					disabled
				></w-input>
			</el-form-item>
			<el-form-item slot="right" prop="procedureId" label="工序选择：">
				<w-select :multiple='false' v-model="procedureDetails.procedureId"
					:clearable='false' :collapseTags='false'
					:optionlist='procedureNameList' :isBlock='true'
					:disabled="disabled"
					class="form-item-input" @change="changeProcedure">
				</w-select>
			</el-form-item>
		</fx-detials-form-row>
		<fx-detials-form-row>
			<el-form-item slot="left" prop="connectionType" label="连接方式：">
				<w-select :multiple='false' v-model="procedureDetails.connectionType"
					:clearable='false' :collapseTags='false' :optionlist='connectionTypeList'
					class="form-item-input" disabled>
				</w-select>
			</el-form-item>
			<el-form-item slot="right" prop="workTimeCount" label="标准作业时间：">
				<w-input-number
					v-model="procedureDetails.workTimeCount"
					class="form-item-input"
					:pointSize="4"
					style="width: 150px;"
					:disabled="disabled"
				></w-input-number>
				<w-select :multiple='false' v-model="procedureDetails.timeUnit"
					:clearable='false' :collapseTags='false' :optionlist='timeUnitList'
					:disabled="disabled"
					class="form-item-input" style="width: 120px;display: inline-block; margin-left: 5px;">
				</w-select>
			</el-form-item>
		</fx-detials-form-row>
		<fx-detials-form-row>
			<el-form-item slot="left" prop="stationEntitys" label="工位：">
			<el-input autocomplete="off" class="form-item-input">
				<w-icon slot='suffix' class="el-input__icon" v-if='!disabled' type="relation-workkind" size="mini" @click="handelStation"></w-icon>
			</el-input>
				<el-tag v-if="(procedureDetails.stationEntitys||[]).length >= 1" style="position:absolute;left:0;">
						{{procedureDetails.stationEntitys[0].name}}
				</el-tag>
				<el-tag  style="position:absolute;right:30px;" v-if="(procedureDetails.stationEntitys||[]).length > 1">
						+{{procedureDetails.stationEntitys.length - 1}}
				</el-tag>
			</el-form-item>
		</fx-detials-form-row>
		<stationtransferDialog ref="stationtransferDialog"
		@on-save-station="doSaveStation"></stationtransferDialog>
	</el-form>
</template>
<script>
import stationtransferDialog from '@/views/workkind/stationTransferDialog.vue'
export default {
	name: 'routeBasic',
	components: {
		stationtransferDialog
	},
	props: {
		visibleFlag: Boolean,
		procedureDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		procedureNameList: {
			type: Array,
			default: () => {
				return []
			}
		},
		routeDetails: {
			type: Object,
			default: () => {
				return {}
			}
		},
		disabled: Boolean
	},
	data () {
		var checkworkTimeCount = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('该字段不能为空且不能为0'))
			} else {
				callback()
			}
		}
		return {
			rules: {
				seq: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				procedureId: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				connectionType: [{ required: true, message: '该字段不能为空', trigger: 'change' }],
				workTimeCount: [{ validator: checkworkTimeCount, trigger: 'change' }],
				stationEntitys: [{ required: true, message: '该字段不能为空', trigger: 'change' }]
			},
			timeUnitList: [{
				id: 1,
				name: '小时'
			}, {
				id: 2,
				name: '分钟'
			}, {
				id: 3,
				name: '天'
			}],
			connectionTypeList: [{
				id: 1,
				name: '串联'
			}, {
				id: 2,
				name: '并联'
			}]
		}
	},
	watch: {
		visibleFlag: {
			immediate: true,
			handler (val) {
				if (val) {
					this.refresh()
				}
			}
		}
	},
	computed: {
		isAdd () {
			return !this.procedureDetails.id
		}
	},
	methods: {
		refresh () {
			this.$nextTick(() => {
				this.$refs.form.clearValidate()
			})
		},
		validate () {
			return this.$refs.form.validate()
		},
		changeProcedure (val) {
			this.$emit('on-change-procedure', val, this.procedureDetails.id)
		},
		saveProcedure () {
			this.$emit('saveProcedure')
		},
		checkProcedureDetail () {
			return this.onValidateFormData()
		},
		onValidateFormData () {
			return new Promise(resolve => {
				this.validate().then(() => {
					resolve()
				}).catch(() => {
					this.$fxMessage.warning('请填写必填信息')
				})
			})
		},
		handelStation () {
			const id = this.procedureDetails.id === 'temp' ? '' : this.procedureDetails.id
			this.$refs.stationtransferDialog.open(id, this.procedureDetails.stationEntitys || [], (this.routeDetails || {}).productionLineId)
		},
		doSaveStation (sels) {
			this.procedureDetails.stationEntitys = sels
			this.$forceUpdate()
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-item-input {
	width: 275px
	box-sizing: border-box
}
.form-item-input-full {
	width:740px
}
.form-item-input-buyer {
	width: 220px
}
.form-item-memo {
	>>>.el-form-item__label {
		padding-left:10px
	}
}
</style>
